<template>
    <div class="myselfContainer">
        <div class="myselfHeader">我的</div>
        <router-link to="/login" v-if="!loginOrNot" style="text-decoration: none;">
            <div class="myselfBox"><p class="tipLogin">请先登录</p></div>
        </router-link>
        <router-link to="/userInformation" v-if="loginOrNot">
            <div class="myselfBox">
                <div class="inlineblockImg"><img :src="profile"></div>
                <div class="inlineblockMessage">
                    <div class="messageBoxMessage">
                        <div class="userNameBox">{{userName}}</div>
                        <div class="phoneNameBox"><img src="../images/手机.svg"><p>{{phoneName}}</p></div>
                    </div>
                </div>
                <div class="right"><p>></p></div>
            </div>
        </router-link>
        <div class="myselfProperty">
            <div class="propertyBox"><div class="row1"><p>0</p>元</div><div class="row2">我的余额</div></div>
            <div class="propertyBox center" @click="gotoRedBag">
                <div class="row1"><p>{{redBagNum}}</p>个</div><div class="row2">我的红包</div>
            </div>
            <div class="propertyBox"><div class="row1"><p>960</p>分</div><div class="row2">我的积分</div></div>
        </div>
        <div class="myselfBody">
            <div class="select"><div><img src="../images/my订单.svg"></div><div>我的订单</div><div class="icon">></div></div>
            <div class="select"><div><img src="../images/my商城.svg"></div><div>积分商城</div><div class="icon">></div></div>
            <div class="select tag"><div><img src="../images/my皇冠.svg"></div><div>饿了么会员卡</div><div class="icon">></div></div>
            <div class="select"><div><img src="../images/my服务中心.svg"></div><div>服务中心</div><div class="icon">></div></div>
            <div class="select"><div><img src="../images/my下载.svg"></div><div>下载饿了么APP</div><div class="icon">></div></div>
        </div>
        <footer-bar class="footerClass"></footer-bar>
    </div>
</template>
<script>
    import footerBar from '../components/footer';
    export default{
        data(){
            return{
                profile:"",
                userName:"",
                phoneName:"",
                chooseMsg:4,
                redBagNum:0,
                loginOrNot:false
            }
        },
        components:{
            footerBar
        },
        mounted(){
            if(window.sessionStorage.getItem('tokenStr'))
                this.loginOrNot=true;
            if(window.sessionStorage.getItem('Tag-myself')){
                this.profile=window.sessionStorage.getItem('profile');
                this.userName=window.sessionStorage.getItem('userName');
                this.phoneName=window.sessionStorage.getItem('phoneName');
            }else{
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                this.postRequest('/users/getUsersProperty',null,tokenStr).then(response=>{
                    if(response.code==200){
                        this.userName=response.obj.userName;
                        if(response.obj.profile==null)
                            this.profile="";
                        else this.profile="/file"+response.obj.profile;
                        this.phoneName=response.obj.phoneName;
                        window.sessionStorage.setItem('userName',this.userName);
                        window.sessionStorage.setItem('profile',this.profile);
                        window.sessionStorage.setItem('phoneName',this.phoneName);
                        window.sessionStorage.setItem('Tag-myself',true);
                    }
                });
            }
            //获取红包的总数
            this.getRedBagNum();
        },
        methods:{
            getRedBagNum(){
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                this.getRequest('/redPaper/getAllRedParperNumber',null,tokenStr).then(response=>{
                    if(response.code==200){
                        this.redBagNum=response.obj;
                    }
                });
            },
            gotoRedBag(){
                if(window.sessionStorage.getItem("tokenStr")){
                    this.$router.push('redBag');
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .myselfContainer{
        position: relative;
        overflow: hidden;//内容超过指定高度，出现滚动条
        @include white;
        .myselfHeader{
            background-color: #26a2ff;
            @include width-height(100%,2.3rem);
            @include font-size-color(1.3rem,#fff);
            text-align: center;
            padding-top: 0.3rem;
        }
        .footerClass{
            @include width-height(100%,3rem);
            position: fixed;
            bottom: 0;
        }
        .myselfBox{
            @include width-height(100%,6rem);
            @include blue;
            margin-top:0.3rem;
            position: relative;
            .tipLogin{
                text-align: center;
                @include font-size-color(1.5rem,#fff);
                padding-top: 2rem;
            }
            .inlineblockImg{
                display: inline-block;
                margin-left: 0.8rem;
                @include width-height(16%,100%);
                img{
                    @include width-height(80px,80px);
                    border-radius: 50%;
                    @include center-tb;
                }
            }
            .inlineblockMessage{
                display: inline-block;
                @include width-height(60%,100%);
                margin-left: 0.8rem;
                .messageBoxMessage{
                    display: block;
                    @include center-tb;
                    @include width-height(100%,60px);
                    .userNameBox{
                        @include font-size-color(1.5rem,#fff);
                        @include width-height(100%,25px);
                        display: block;
                    }
                    .phoneNameBox{
                        @include width-height(100%,25px);
                        @include font-size-color(1rem,#fff);
                        display: block;
                        position: absolute;
                        margin: 0.3rem 0 0 -0.3rem;
                        p{
                            display: inline-block;
                            position: absolute;
                            padding-top: 0.15rem;
                        }
                        img{
                            display: inline-block;
                                @include width-height(25px,25px);
                        }
                    }
                }
            }
            .right{
                display: inline-block;
                @include width-height(14%,100%);
                @include center-tb;
                p{
                    @include width-height(100%,100%);
                    @include font-size-color(1.5rem,#fff);
                    line-height: 80px;
                    text-align: right;
                    padding-top: 0.2rem;
                }
            }
        }
        .myselfProperty{
            display: grid;
            @include width-height(100%,6rem);
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 100% 100% 100%;
            margin-bottom: 0.8rem;
            .center{
                border-left: 3px solid #f1f1f1;
                border-right: 3px solid #f1f1f1;
            }
            .propertyBox{
                background-color: #fff;
                padding-top: 1rem;;
                .row1{
                    text-align: center;
                    p{
                        display: inline;
                        @include font-size-color(2rem,#FFA500);
                        font-weight:bold;
                    }
                }
                .row2{
                    text-align: center;
                    @include font-size-color(1rem,#666);
                }
            }
        }
        .myselfBody{
            .select{
                display: grid;
                background-color: #fff;
                @include width-height(100%,2.4rem);
                grid-template-columns: 8% 84% 8%;
                grid-template-rows: 100% 100% 100%;
                margin-bottom: 0.1rem;
                padding-top: 0.5rem;
                padding-left:0.5rem;
                @include font-size-color(1.3rem,#000);
                .icon{
                    @include font-size-color(1.3rem,#d1d1d1);
                    font-weight:bold;
                }
                img{
                    @include width-height(30px,30px);
                }
            }
            .tag{
                margin-bottom: 0.7rem;
            }
        }
    }
</style>